﻿@using Smartstore.Core.Content.Menus;
@using Smartstore.Web.Models.Common;

@model FooterModel

@{
    var socialLinks = new List<(string link, string cssClass)>();
    if (Model.FacebookLink.HasValue())
    {
        socialLinks.Add((Model.FacebookLink, "facebook-f"));
    }

    if (Model.TwitterLink.HasValue())
    {
        socialLinks.Add((Model.TwitterLink, "twitter"));
    }

    if (Model.PinterestLink.HasValue())
    {
        socialLinks.Add((Model.PinterestLink, "pinterest-p"));
    }

    if (Model.YoutubeLink.HasValue())
    {
        socialLinks.Add((Model.YoutubeLink, "youtube"));
    }

    if (Model.InstagramLink.HasValue())
    {
        socialLinks.Add((Model.InstagramLink, "instagram"));
    }

    var invserseFooter = Display.GetThemeVariable<bool>("inverse-footer");
}

<footer id="footer" class="@(invserseFooter ? "footer-inverse" : "footer-light")">

    <zone name="footer_top"></zone>

    <div sm-if="Model.ShowSocialLinks && socialLinks.Any()" class="footer-social-wrapper">
        <div class="container footer-social">
            <div class="row">
                <div class="col text-center">
                    @foreach (var link in socialLinks)
                    {
                        <a href="@link.Item1" target="_blank" class="btn x-btn-@(invserseFooter ? "clear" : "secondary") btn-circle btn-social btn-brand-@link.Item2">
                            <i class="fab fa-@link.Item2"></i>
                        </a>
                    }
                </div>
            </div>
        </div>
    </div>

    <div class="footer-main-wrapper">
        <div class="container footer-main">
            <div class="row sm-gutters">

                <div class="col-md-3">
                    <nav class="footer-links nav-collapsible">
                        <h4 class="footer-title nav-toggler collapsed" data-toggle="collapse" data-target="#footer-info" aria-controls="footer-info" aria-expanded="false">
                            @T("Footer.Info")
                        </h4>
                        <div class="collapse nav-collapse" id="footer-info">
                            <menu name="FooterInformation" template="LinkList"></menu>
                        </div>
                    </nav>
                </div>

                <div class="col-md-3">
                    <nav class="footer-links nav-collapsible">
                        <h4 class="footer-title nav-toggler collapsed" data-toggle="collapse" data-target="#footer-service" aria-controls="footer-service" aria-expanded="false">
                            <span class="d-none d-md-block">@T("Footer.Service")</span>
                            <span class="d-md-none">@T("Footer.Service.Mobile")</span>
                        </h4>
                        <div class="collapse nav-collapse" id="footer-service">
                            <menu name="FooterService" template="LinkList"></menu>
                        </div>
                    </nav>
                </div>

                <div class="col-md-3">
                    <nav class="footer-links company nav-collapsible">
                        <h4 class="footer-title nav-toggler collapsed" data-toggle="collapse" data-target="#footer-company" aria-controls="footer-company" aria-expanded="false">
                            <span class="d-none d-md-block">@T("Footer.Company")</span>
                            <span class="d-md-none">@T("Footer.Company.Mobile")</span>
                        </h4>
                        <div class="collapse nav-collapse" id="footer-company">
                            <menu name="FooterCompany" template="LinkList"></menu>
                        </div>
                    </nav>
                </div>

                <div class="col-md-3">
                    <zone name="footer_col_4_before"></zone>

                    @if (!Model.HideNewsletterBlock)
                    {
                        <div class="footer-newsletter nav-collapsible" data-subscription-url="@(Url.Action("Subscribe", "Newsletter"))" data-subscription-failure="@T("Newsletter.SubscriptionFailed")">
                            <h4 class="footer-title nav-toggler collapsed" data-toggle="collapse" data-target="#footer-newsletter" aria-controls="footer-newsletter" aria-expanded="false">@T("Newsletter.Title")</h4>
                            <div class="collapse nav-collapse" id="footer-newsletter">
                                <div id="newsletter-subscribe-block">
                                    <div class="input-group has-icon mb-2">
                                        <input asp-for="NewsletterEmail" id="newsletter-email" placeholder="@T("Newsletter.Email")" />
                                        <span class="input-group-icon text-muted">
                                            <i class="fa fa-envelope"></i>
                                        </span>
                                        <div class="input-group-append">
                                            <button id="newsletter-subscribe-button" class="btn btn-primary btn-icon" title="@T("Newsletter.Button")">
                                                <i class="fa fa-angle-right"></i>
                                            </button>
                                        </div>
                                    </div>

                                    <div class="d-none d-lg-block">
                                        <div class="form-inline">
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" id="newsletter-subscribe" value="newsletter-subscribe" name="optionsRadios" checked="checked">
                                                <label class="form-check-label" for="newsletter-subscribe">
                                                    <span>@T("Newsletter.Subscribe")</span>
                                                </label>
                                            </div>

                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" id="newsletter-unsubscribe" value="newsletter-unsubscribe" name="optionsRadios">
                                                <label class="form-check-label" for="newsletter-unsubscribe">
                                                    <span>@T("Newsletter.Unsubscribe")</span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>

                                    <zone name="gdpr_consent_small"></zone>

                                    <span asp-validation-for="NewsletterEmail"></span>

                                </div>
                                <div id="newsletter-result-block" class="alert alert-success d-none mt-2"></div>
                            </div>
                        </div>
                    }

                    @if (Model.ShowThemeSelector)
                    {
                        <div class="theme-selector d-none d-md-block" attr-class='(!Model.HideNewsletterBlock, "mt-3")'>
                            <h4 class="footer-title">@T("Footer.Themes")</h4>
                            <div class="content">
                                @{
                                    @await Component.InvokeAsync("StoreThemeSelector")
                                }
                            </div>
                        </div>
                    }

                    <zone name="footer_col_4_after"></zone>
                </div>
            </div>
        </div>
    </div>

    <zone name="footer_bottom"></zone>

    <div class="footer-bottom-wrapper">
        <div class="container footer-bottom">
            <div class="row sm-gutters">
                <div sm-if="Model.ShowLegalInfo" class="col pb-1 pb-sm-0">
                    @Html.Raw(Model.LegalInfo)
                </div>

                <div sm-if="Model.SmartStoreHint.HasValue()" class="col-12 col-sm-auto pb-1 pb-sm-0 text-sm-center">
                    @Html.Raw(Model.SmartStoreHint)
                </div>

                <div class="col text-sm-right">
                    @Html.Raw(T("Content.CopyrightNotice", DateTime.Now.Year.ToString(), Model.StoreName))
                </div>
            </div>
        </div>
    </div>
</footer>
